<template>
  <div class="echarts-container" v-if="isShowCard">
    <el-card>
      <template #header>
        <div class="card-header">
          <h3>搜索结果</h3>
          <el-button type="danger" @click="handleClose">关闭</el-button>
        </div>
      </template>
      <template #default>
        <div v-if="hasSearchResults">
          <h3>查询到{{ searchResultNum }}个结果</h3>
          <SearchResultChart />
        </div>
        <h3 v-else>无查询结果</h3>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
//pinia
import { storeToRefs } from 'pinia'
import { useOlStore } from '@/stores/openlayer.js'

//echarts组件
import SearchResultChart from './SearchResultChart.vue'

//从pinia导入需要的变量
const store = useOlStore()
const { flagclearSearch } = store
const { searchPoint, clearSearchFlag } = storeToRefs(store)
const searchResult = ref(false)

// 控制卡片显示状态
const isShowCard = ref(false)

// 计算属性：是否有搜索结果
const hasSearchResults = computed(() => {
  return searchPoint.value?.features?.length > 0
})

// 计算属性：搜索结果数量
const searchResultNum = computed(() => {
  return searchPoint.value?.features?.length || 0
})

// 监听搜索结果变化
watch(searchPoint, (newVal) => {
  // 当有新搜索结果时显示卡片
  if (newVal && newVal.features) {
    isShowCard.value = true
  }
})

// 关闭卡片处理函数
const handleClose = () => {
  isShowCard.value = false
  // 清除搜索结果
  searchPoint.value = {}
  flagclearSearch()
}
</script>

<style lang="scss" scoped>
.echarts-container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  .el-card {
    width: 50%;
    // height: 50%;
    // margin-top: 50%;
    transform: translateX(50%);
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
